<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Single Page</title>
    <script>
        function showSection(section) {
            fetch(`/singlepage/sections/${section}`)
                .then(response => response.text())
                .then(text => {
                    console.log(text);
                    document.querySelector("#content").innerHTML = text;
                });
        }

        // document.addEventListener('DOMContentLoaded', ()=>{
        //     document.querySelectorAll("button").forEach(button =>{
        //         button.onclick = function() {
        //             showSection(this.dataset.section)
        //         }
        //     })
        // })

        window.onpopstate = (event)=>{
            console.log(event.state.section);
            showSection(event.state.section);
        }
        document.addEventListener('DOMContentLoaded', () => {
            document.querySelectorAll("button").forEach(button => {
                button.onclick = function () {
                    const section = this.dataset.section;
                    history.pushState({section: section}, "", `section${section}`);
                    showSection(section);
                }
            })
        })
    </script>

</head>
<body>

<h1>Single Page:</h1>
{% block content %}

{% endblock %}

</body>
</html>